<!--  -->
<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    >
      <template #btns>
        <el-button
          v-if="meta.indexOf('GoodsOrderExport') > -1"
          :loading="exportLoading"
          type="primary"
          @click="handleExport"
        >{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tablec"
      :row-style="{ height: '60px' }"
    >
      <el-table-column
        align="center"
        :label="$t('message.ddbh')"
        min-width="210"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row)">{{
            scope.row.orderId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.spxx')"
        prop="goodsInfo"
        min-width="280"
      >
        <template v-slot="scope">
          <el-tooltip placement="top" :content="scope.row.goodsInfo">
            <div class="pointer">
              <div
                v-for="(item, index) in scope.row.goodsInfos.slice(0, 2)"
                :key="index"
                class="overhiddenText"
              >
                {{ item }}
              </div>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.spzj')"
        prop="allPrice"
        min-width="110"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.zffs')"
        prop="payMethod"
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.sfk')"
        prop="realPrice"
        min-width="110"
      />
      <el-table-column
        align="center"
        :label="$t('message.ddly')"
        prop="channelType"
        min-width="120"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.channelTypeName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        prop="createTime"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.paytime')"
        show-overflow-tooltip
        prop="payTime"
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.czr')"
        show-overflow-tooltip
        prop="creatorName"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="$t('message.qhfs')"
        fixed="right"
        min-width="90"
      >
        <template slot-scope="{ row }">
          <span v-if="row.claimType == 0">{{ $t('message.kuaidi') }}</span>
          <span v-if="row.claimType == 1">{{ $t('message.ziti') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.ddzt')"
        fixed="right"
        min-width="90"
      >
        <template slot-scope="{ row }">
          <span
            v-if="row.payStatus == 0"
            class="primaryColor pointer"
            @click="getOrderType(row.orderId)"
          >{{ row.statusName }}</span>
          <span v-else>{{ row.statusName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message.bz')"
        show-overflow-tooltip
        prop="note"
        min-width="120"
        align="center"
      />
      <el-table-column
        align="center"
        :label="$t('message.wlzt')"
        min-width="90"
      >
        <template slot-scope="{ row }">
          <span>{{ row.logisticStatusName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message.caozuo')"
        :width="$i18n.locale === 'ZH'? 180 : 230"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <!-- && meta.indexOf('GoodsCancelPay') > -1 -->
            <el-button
              v-if="scope.row.logisticStatus == 3 && scope.row.payStatus =='3'"
              v-preventReClick
              type="text"
              @click="handleDeliver(scope.row, '0')"
            >{{ $t('message.fahuo') }}</el-button>
            <el-button
              v-if="scope.row.logisticStatus == 4 && scope.row.payStatus =='3'"
              v-preventReClick
              type="text"
              @click="handleDeliver(scope.row, '1')"
            >{{ $t('message.ziti') }}</el-button>
            <el-button
              v-if="scope.row.payStatus == 5 && scope.row.saleType == 1"
              v-preventReClick
              type="text"
              @click="onceAgain(scope.row.orderId)"
            >{{ $t('message.zlyd') }}</el-button>
            <el-button
              v-if="
                (scope.row.payStatus == 3 || scope.row.payStatus == 6) &&
                  meta.indexOf('GoodsPrinterOrder') > -1
              "
              v-preventReClick
              type="text"
              @click="print(scope.row.orderId, scope.row.saleType)"
            >{{ $t('message.dyxp') }}</el-button>
            <!-- && meta.indexOf('GoodsPrinterOrder') > -1 -->
            <el-button
              v-if="(scope.row.payStatus == 3 || scope.row.payStatus == 6) && scope.row.saleType == 1"
              v-preventReClick
              type="text"
              @click="refound(scope.row.orderId)"
            >{{ $t('message.qetk') }}</el-button>
            <el-button
              v-if="scope.row.payStatus == 3 || scope.row.payStatus == 6"
              v-preventReClick
              type="text"
              @click="rowClickRefound(scope.row)"
            >{{ $t('message.tk') }}</el-button>
            <el-button
              v-if="
                scope.row.payStatus == 0 &&
                  scope.row.channelType == '02' &&
                  meta.indexOf('GoodsPayContinue') > -1
              "
              v-preventReClick
              type="text"
              @click="continuePay(scope.row.orderId)"
            >{{ $t('message.zf') }}</el-button>
            <el-button
              v-if="
                scope.row.payStatus == 0 && meta.indexOf('GoodsCancelPay') > -1
              "
              v-preventReClick
              type="text"
              class="secondColor"
              @click="cancleOrder(scope.row.orderId)"
            >{{ $t('message.qx') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="pageSizeChange"
    />
    <el-dialog
      :title="$t('message.tk')"
      :visible.sync="RefoundModal"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="800px"
    >
      <div>
        <div class="mb20">
          <span>{{ $t('message.tklx') }}：</span>
          <el-radio v-model="refundType" label="1">{{ $t('message.jtk') }}</el-radio>
          <el-radio v-model="refundType" label="0">{{ $t('message.thtk') }}</el-radio>
        </div>
        <el-table
          ref="RefoundTableRef"
          :data="activeRefoundDetail.detailList"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table mb30"
          @selection-change="RefoundSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column
            align="center"
            :label="$t('message.spmc')"
            prop="goodsName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.xsj')"
            prop="price"
            min-width="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.num')"
            prop="num"
            min-width="60"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sfk')"
            prop="amount"
            min-width="80"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="RefoundModal = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          :loading="RefoundLoading"
          type="primary"
          @click="handleRefound"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.tkxq')"
      :visible.sync="RefoundDetailModal"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="800px"
    >
      <div>
        <div class="mb20">
          <span>{{ $t('message.tklx') }}：</span>
          <span> {{ refundType === "1" ? $t('message.jtk') : $t('message.thtk') }} </span>
        </div>
        <el-table
          ref="RefoundTableRef"
          :data="selectedGoodsList"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table mb30"
          @selection-change="RefoundSelectionChange"
        >
          <el-table-column
            align="center"
            :label="$t('message.spmc')"
            prop="goodsName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.xsj')"
            prop="price"
            min-width="80"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.num')"
            prop="num"
            min-width="60"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sfk')"
            prop="amount"
            min-width="80"
            show-overflow-tooltip
          />
        </el-table>
        <div class="df_ac">
          <span>{{ $t('message.tkje') }}：</span>
          <el-input
            v-model="changePrice"
            :disabled="!isChangePrice"
            oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
            type="text"
            class="w200 mr20"
          />
          <el-checkbox v-model="isChangePrice" class="mr20">{{ $t('message.gaijia') }}</el-checkbox>
          <!-- <span class="ml20 placeholder9">{{ $t('message.bzxszfjeylfh') }}</span> -->
        </div>
        <!-- <div class="df_ac mt20">
          <span>{{ $t('message.bz') }}：</span>
          <el-input v-model="remarkRefound" class="w400" />
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="RefoundDetailModal = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          :loading="RefoundDetailLoading"
          type="primary"
          @click="confirmRefound"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="deliverParam.type == '0' ? $t('message.fahuo') : $t('message.ziti')"
      :visible.sync="isShowDeliver"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="600px"
    >
      <div>
        <div class="mb20 ml20">
          {{ $t('message.nzzddd') }}：<span class="mr10">{{ deliverParam.orderId }}</span>
          {{ $t('message.jinxin') }}{{ deliverParam.type == "0" ? $t('message.fahuo') : $t('message.ziti') }}{{ $t('message.chuli') }}
        </div>
        <el-form
          ref="deliverParamRef"
          :rules="rules"
          label-width="auto"
          :model="deliverParam"
        >
          <el-form-item
            v-if="deliverParam.type == '0'"
            prop="kdNo"
            :label="$t('message.kddh')"
          >
            <el-input v-model="deliverParam.kdNo" />
          </el-form-item>
          <el-form-item
            v-if="deliverParam.type == '0'"
            prop="kdCompany"
            :label="$t('message.kdgs')"
          >
            <el-input v-model="deliverParam.kdCompany" />
          </el-form-item>
          <el-form-item
            v-if="deliverParam.type == '1'"
            prop="claimCode"
            :label="$t('message.ztm')"
          >
            <el-input v-model="deliverParam.claimCode" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowDeliver = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="handleSend"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <orderDialog ref="child" @orderSuccess="getList()" />
    <Detail ref="DetailRef" />
    <GoodsTem v-if="isPrint" ref="GoodsTemRef" />
  </div>
</template>

<script>
import {
  getOrderTypeQuery,
  goodsOrderList,
  goodsOrderCancelPay,
  orderType,
  printOrder,
  configList,
  refoundOrder,
  readdOrder,
  logisticStatus,
  GoodsOrderExport,
  goodsOrderDetail,
  GoodsOrderPRefund,
  goodsSendPost
} from '@/api'
import orderDialog from '@/components/order'
import { TJshortcuts } from '@/utils/config'
import Detail from './detail.vue'
import { parseTime, parseTimeb } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
import GoodsTem from '@/components/printTem/goods.vue'
export default {
  name: 'OrderManager',
  components: {
    orderDialog,
    QueryForm,
    Detail,
    GoodsTem
  },
  data() {
    return {
      deliverParam: {},
      isPrint: false,
      isShowDeliver: false,
      rules: {
        claimCode: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        kdCompany: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        kdNo: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }]
      },

      RefoundModal: false, // 退单相关
      RefoundDetailModal: false,
      RefoundLoading: false,
      refundType: '1',
      activeRefoundDetail: {},
      selectedGoodsList: [],
      RefoundDetailLoading: false,
      changePrice: '',
      isChangePrice: false,
      remarkRefound: '',
      exportLoading: false,
      queryFormConfig: {
        formItems: [
          {
            filed: 'orderId',
            type: 'input',
            label: this.$t('message.ddbh')
          },
          {
            filed: 'goodsName',
            type: 'input',
            label: this.$t('message.spxx'),
            placeholder: this.$t('message.spmctxm'),
            keyup: true
          },
          {
            filed: 'payMethod',
            type: 'select',
            label: this.$t('message.zffs'),
            options: []
          },
          {
            filed: 'payStatus',
            type: 'select',
            label: this.$t('message.ddzt'),
            placeholder: this.$t('message.qxz') + this.$t('message.ddzt'),
            labelCode: 'name',
            options: []
          },
          {
            filed: 'logisticStatus',
            type: 'select',
            label: this.$t('message.wlzt'),
            labelCode: 'name',
            options: [
              // { value: '0', label: this.$t('message.wzf') },
              // { value: '3', label: this.$t('message.yfk') },
              // { value: '5', label: this.$t('message.tkcg') }
            ]
          },
          {
            filed: 'claimType',
            type: 'select',
            label: this.$t('message.qhfs'),
            options: [
              { value: '0', label: this.$t('message.kuaidi') },
              { value: '1', label: this.$t('message.ziti') }
            ]
          },
          {
            filed: 'times',
            type: 'daterange',
            label: this.$t('message.xdsj'),
            pickerOptions: {
              shortcuts: TJshortcuts
            }
          }
        ],
        online: true
      },
      meta: [],
      modalDialog: this.$store.getters.dialog,
      totalCount: 0,
      list: [],
      listLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      filters: {
        times: [parseTimeb(7).slice(0, 10), parseTime(new Date()).slice(0, 10)]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getOrderStatusList()
    this.getDefalutConfig()
    this.getlogisticStatus()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getlogisticStatus() {
      logisticStatus({ param: {}}).then(res => {
        this.queryFormConfig.formItems[4].options = res.recordList || []
      })
    },
    getOrderStatusList() {
      getOrderTypeQuery({ param: {}}).then((res) => {
        this.queryFormConfig.formItems[3].options = res.recordList || []
      })
    },
    handleDeliver(item, type) {
      this.isShowDeliver = true
      this.deliverParam = { orderId: item.orderId, type }
    },
    handleSend() {
      const { deliverParam } = this
      this.$refs['deliverParamRef'].validate((valid) => {
        if (valid) {
          goodsSendPost({ param: deliverParam }).then((res) => {
            const str = deliverParam.type === '0' ? this.$t('message.fhcg') : this.$t('message.qjcg')
            this.$message.success(str)
            this.isShowDeliver = false
            this.getList()
            this.deliverParam = {}
          })
        }
      })
    },
    getOrderType(orderId) {
      orderType({
        param: {
          orderId
        }
      })
        .then((res) => {
          const str = res.record.msg
          if (res.errorCode === '000000') {
            if (res.record.code === '0') {
              this.$message.success(str)
              this.getList()
            } else if (res.record.code === '2') {
              this.$message.info(str)
            } else {
              this.$message.error(str)
              this.getList()
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    // 获取列表
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (filters.times && filters.times.length > 0) {
        filters.startTimeQ = filters.times[0] + ' 00:00:00'
        filters.endTimeQ = filters.times[1] + ' 23:59:59'
      } else {
        filters.startTimeQ = null
        filters.endTimeQ = null
      }

      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      goodsOrderList({
        pagination,
        param: {
          venueId,
          ...filters,
          saleType: 0
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            const list = res.recordList
            this.totalCount = res.totalCount
            list.forEach((item) => {
              if (item.goodsInfo) {
                item.goodsInfos = item.goodsInfo.split('\n')
              } else {
                item.goodsInfos = []
              }
            })
            this.list = list
            if (
              res.totalCount &&
              res.recordList.length === 0 &&
              pagination.page > 1
            ) {
              this.getList(Math.ceil(res.totalCount / pagination.rows))
            }
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleExport() {
      const { filters } = this
      const venueId = sessionStorage.getItem('venueId')
      if (filters.times && filters.times.length > 0) {
        filters.startTimeQ = filters.times[0] + ' 00:00:00'
        filters.endTimeQ = filters.times[1] + ' 23:59:59'
      } else {
        filters.startTimeQ = null
        filters.endTimeQ = null
      }
      this.exportLoading = true
      GoodsOrderExport({
        param: {
          venueId,
          ...filters,
          saleType: 0
        }
      }).then(
        (res) => {
          this.exportLoading = false
          if (res.errorCode !== '000000') return
          const elink = document.createElement('a')
          elink.style.display = 'none'
          elink.href = res.record.showUrl
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        },
        () => {
          this.exportLoading = false
        }
      )
    },
    handleDetail(item) {
      this.$refs.DetailRef.getOrderDetail(item.orderId)
      this.$refs.DetailRef.isShow = true
    },
    // 删除
    cancleOrder(id) {
      const that = this
      this.$confirm(this.$t('message.qxddtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          goodsOrderCancelPay({ param: { id }})
            .then((res) => {
              ctx.confirmButtonLoading = false
              close()
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.qxcg'))
                that.getList()
              }
            })
            .catch(() => {
              ctx.confirmButtonLoading = false
            })
        }
      }).finally(() => {})
    },
    // 继续支付
    continuePay(id) {
      this.$refs.child.continuePay(id, 'goods')
    },
    confirmRefound() {
      const {
        refundType,
        selectedGoodsList,
        changePrice,
        remarkRefound,
        isChangePrice
      } = this
      const { orderId } = this.activeRefoundDetail
      const detailIds = selectedGoodsList.map((i) => i.id)
      if (
        changePrice === '' ||
        changePrice === null ||
        changePrice === undefined
      ) {
        return this.$message.warning(this.$t('message.qsr') + this.$t('message.tkje'))
      }
      const param = {
        orderId,
        refundType,
        detailIds,
        type: '1',
        refundPrice: changePrice,
        remark: remarkRefound,
        isChange: isChangePrice ? '1' : '0'
      }
      this.RefoundDetailLoading = true
      GoodsOrderPRefund({ param }).then(
        (res) => {
          this.RefoundDetailLoading = false
          if (res.errorCode !== '000000') return
          this.RefoundDetailModal = false
          this.$message.success(this.$t('message.tktcqr'))
          this.getList()
        },
        () => {
          this.RefoundDetailLoading = false
        }
      )
    },
    handleRefound() {
      const { refundType, selectedGoodsList } = this
      if (selectedGoodsList.length === 0) {
        return this.$message.warning(this.$t('message.qxxzxtksp'))
      }
      const { orderId } = this.activeRefoundDetail
      const detailIds = selectedGoodsList.map((i) => i.id)
      const param = {
        orderId,
        refundType,
        detailIds,
        type: '0'
      }
      this.RefoundLoading = true
      GoodsOrderPRefund({ param }).then(
        (res) => {
          this.RefoundLoading = false
          if (res.errorCode !== '000000') return
          this.changePrice = res.record
          this.RefoundModal = false
          this.getList()
          this.RefoundDetailModal = true
        },
        () => {
          this.RefoundLoading = false
        }
      )
    },
    RefoundSelectionChange(val) {
      this.selectedGoodsList = val
    },
    rowClickRefound(row) {
      goodsOrderDetail({ param: { id: row.orderId }}).then((res) => {
        this.activeRefoundDetail = { ...res.record }
        this.activeRefoundDetail.detailList =
          this.activeRefoundDetail.detailList.filter((i) => i.status !== '5')
      })
      this.RefoundModal = true
    },
    refound(orderId) {
      const that = this
      this.$confirm(this.$t('message.ddtkct'), this.$t('message.tixing'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          refoundOrder({ param: { id: orderId }})
            .then((res) => {
              ctx.confirmButtonLoading = false
              close()
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.tktcqr'))
                that.getList()
              }
            })
            .catch(() => {
              ctx.confirmButtonLoading = false
            })
        }
      }).finally(() => {})
    },
    print(id, saleType) {
      this.$confirm(this.$t('message.dyxptc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          this.isPrint = true
          printOrder({
            param: {
              contentMap: {},
              venueId: sessionStorage.getItem('venueId'),
              workId: id,
              templateCode: saleType === 0 ? 'GOODSTPML' : 'GOODSTPML'
            }
          })
            .then((res) => {
              if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
                res.record.dataList.forEach(item => {
                  this.$refs.GoodsTemRef.obj = { ...item }
                  setTimeout(() => {
                    this.$refs.GoodsTemRef.print()
                  }, 300)
                  setTimeout(() => {
                    this.isPrint = false
                  }, 500)
                })
              } else {
                this.isPrint = false
              }
            })
            .catch(() => {
              this.isPrint = false
            })
        })
        .catch(() => {
          // this.$message.info('操作已取消')
        })
    },
    getDefalutConfig() {
      configList({ param: { type: '2', code: '1' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach((e) => {
            e.label = e.name
          })
          this.queryFormConfig.formItems[2].options = arr
          this.allPayMethedList = res.recordList
        })
        .catch((err) => {
          console.log(err)
        })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    onceAgain(id) {
      readdOrder({ param: { id }}).then((res) => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.cjcgqdgwcck'))
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 20px;
  margin-right: 10px;
}
.goosmanager-space-box {
  display: flex;
  position: relative;
  .box-item {
    // position: absolute;
    .goodstype-item {
      background-color: #f7f7f7;
      padding: 20px;
      border-radius: 4px;
      margin-top: 5px;
      margin-right: 10px;
      cursor: pointer;
      display: flex;
      position: relative;
      justify-content: space-between;
      .popItems {
        display: flex;
        justify-content: flex-start;
      }
    }
    .add-goodstype-btn {
      position: fixed;
      bottom: 0;
    }
  }
  .box-item.goodstype {
    width: 30%;
  }
}
.bottom-style {
  height: 50px;
  border-left: 1px #dfe2e8 solid;
  border-right: 1px #dfe2e8 solid;
  border-bottom: 1px #dfe2e8 solid;
  .sum-style {
    margin-left: 10px;
    margin-top: 17px;
    height: 15px;
    float: left;
    .sum-title {
      color: #222;
      font-size: 13px;
    }
    .sum-value {
      color: #dd0707;
      font-size: 17px;
      font-weight: 700;
    }
  }
  .btn-style {
    float: right;
    width: 80px;
    height: 30px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: #1943a9;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    line-height: 30px;
    font-size: 13px;
    font-weight: 700;
  }
}
.count-style {
  margin-left: 5px;
  margin-right: 5px;
}
.pay-style {
  width: 110px;
  height: 30px;
  font-size: 15px;
  line-height: 1px;
  vertical-align: middle;
}
.slelect-pay-style {
  background-color: #1943a9;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}
.messgae-style {
  color: #dd0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.bottom-speace-style {
  margin-bottom: 10px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #dd0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #dd0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle;
    }
  }
}

.settle-btn-style {
  margin-left: 20px;
}
.normal-style {
  border: solid 1px #d8d8d8;
}
.pre {
  white-space: pre;
  .discount-title {
    color: #303133;
    font-size: 16px;
    margin-bottom: 12px;
  }
}
</style>
